{% extends "../base_adminlte.html" %}

{% block content %}
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
    <div class="content-header">
    </div>

  <section class="content">
     {% if perms.public.role_manage %}
    <button  type="button" class="btn btn-primary" id="btn_add" data-toggle="modal"
                     data-target="#addModal" onclick="location='{% url 'roleaddpage' %}'">新增角色</button>
    {% endif %}
      <table class="table table-bordered"  >
        <tr style="font-weight: bold;background-color: #3c8dbc80;">
            <td align="center" style="white-space:nowrap;">序号</td>
            <td align="center" style="white-space:nowrap;">角色名</td>
            <td align="center" style="white-space:nowrap;">权限</td>
            <td align="center" style="white-space:nowrap;">系统</td>
            <td align="center" style="white-space:nowrap;">操作</td>
        </tr>
           {% for g in page %}
            <tr style="background-color: #e4e6e8">
                <td style="white-space:nowrap;vertical-align:middle;">{{ forloop.counter }}</td>
                <td style="white-space:nowrap;vertical-align:middle;">{{ g.name }}</td>
                <td style="vertical-align:middle;">
                    {% for permis in g.permissions.all %}
                        {{ permis.name }}/
                    {% empty %}
                        暂未分配权限
                    {% endfor %}
                </td>
                 <td style="vertical-align:middle;">
                    {% for sysna in g.systemslists_set.all %}
                        {{ sysna.systemname }}/
                    {% empty %}
                        暂未分配系统
                    {% endfor %}
                </td>
               {% if perms.public.role_manage %}
            <td style="white-space:nowrap;vertical-align:middle;">
                <button type="button" class="btn btn-warning btn-xs" onclick="location='{% url 'rolemodpage' %}?id={{ g.id }}'">修改</button>
                <button type="button" class="btn btn-danger btn-xs" onclick="return del({{ g.id }});">删除</button>
            </td>
                   {% else %}
                   <td>/</td>
            {% endif %}
            </tr>
        {% endfor %}
      </table>
<div  style="float:right;height: 200px;font-size:15px">
        {#            #总页码#}
            <div  style="width: 90px;height: 50px;float:left;margin: 10px 0 0 1px"> 总页码 <label>{{ total }}&nbsp;&nbsp;</label></div>
        {#            #当前页码#}
            <div  style="width: 90px;height: 50px;float:left;margin: 10px 0 0 1px"> 当前页码 <label>{{ page.number }}&nbsp;&nbsp;</label></div>

{#            #首页#}
               <div  style="width: 30px;height: 50px;float:left;margin: 10px 0 0 1px">
                        <p><a href='/ansible/rolelist/1'>首页</a> </p>
               </div>

{#             #前一页#}
                <div style="width: 20px;height: 50px;float:left;margin: 10px 0 0 5px">
                   {% if page.has_previous %}
                        <p><a href="/ansible/rolelist/{{ page.previous_page_number }}">{{ page.previous_page_number }}</a> </p>
                    {% endif %}&nbsp;&nbsp;
               </div>
{#             #当前页页码#}
               <div  style="width: 20px;height: 50px;float:left;margin: 10px 0 0 1px">
                <p href="/ansible/rolelist/{{ page.number }}">{{ page.number }}</p>
               </div>
{#                 #后一页#}
               <div style="width: 20px;height: 50px;float:left;margin: 10px 0 0 1px">
                       {% if page.has_next %}
                            <p><a href="/ansible/rolelist/{{ page.next_page_number }}">{{ page.next_page_number }}</a></p>
                       {% else %}
                       <p></p>
                        {% endif %}
               </div>
{#                 #尾页#}
                 <div  style="width: 50px;height: 50px;float:left;margin: 10px 0 0 1px">
                        <p><a href="/ansible/rolelist/{{ total }}">尾页</a> </p>
               </div>
  </div>
  </section>
</div>
{% endblock %}

{% block scriptcontent %}
<script>
    function del(a){
             if(confirm("确实要删除吗?")){
                 alert("已经删除！");
                 document.getElementById('')
                 location='{% url 'roledelete' %}?id='+a+''
            }else{
                alert("已经取消了删除操作");
             }
         }
</script>
{% endblock %}
